"use client"

import { TrendingUp } from "lucide-react"
import { CartesianGrid, Dot, Line, LineChart } from "recharts"

import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
} from "~/registry/default/ui/card"
import {
   type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
} from "~/registry/default/ui/chart"

export const description = "A line chart with dots and colors"

const chartData = [
   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
   { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
   { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
   { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
   visitors: {
      label: "Visitors",
      color: "hsl(var(--chart-2))",
   },
   chrome: {
      label: "Chrome",
      color: "hsl(var(--chart-1))",
   },
   safari: {
      label: "Safari",
      color: "hsl(var(--chart-2))",
   },
   firefox: {
      label: "Firefox",
      color: "hsl(var(--chart-3))",
   },
   edge: {
      label: "Edge",
      color: "hsl(var(--chart-4))",
   },
   other: {
      label: "Other",
      color: "hsl(var(--chart-5))",
   },
} satisfies ChartConfig

export default function Component() {
   return (
      <Card>
         <CardHeader>
            <CardTitle>Line Chart - Dots Colors</CardTitle>
            <CardDescription>January - June 2024</CardDescription>
         </CardHeader>
         <CardContent>
            <ChartContainer config={chartConfig}>
               <LineChart
                  accessibilityLayer
                  data={chartData}
                  margin={{
                     top: 24,
                     left: 24,
                     right: 24,
                  }}
               >
                  <CartesianGrid vertical={false} />
                  <ChartTooltip
                     cursor={false}
                     content={
                        <ChartTooltipContent
                           indicator="line"
                           nameKey="visitors"
                           hideLabel
                        />
                     }
                  />
                  <Line
                     dataKey="visitors"
                     type="natural"
                     stroke="var(--color-visitors)"
                     strokeWidth={2}
                     dot={({ payload, ...props }) => {
                        return (
                           <Dot
                              key={payload.browser}
                              r={5}
                              cx={props.cx}
                              cy={props.cy}
                              fill={payload.fill}
                              stroke={payload.fill}
                           />
                        )
                     }}
                  />
               </LineChart>
            </ChartContainer>
         </CardContent>
         <CardFooter className="flex-col items-start gap-2 text-sm">
            <div className="flex gap-2 font-medium leading-none">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
            </div>
            <div className="leading-none text-muted-foreground">
               Showing total visitors for the last 6 months
            </div>
         </CardFooter>
      </Card>
   )
}
